<ng-content></ng-content>

<div
  type="button"
  class="group flex cursor-pointer items-center gap-1 rounded-lg py-1.5 px-3 text-lg font-semibold overflow-hidden whitespace-nowrap
    text-token-text-secondary hover:bg-token-main-surface-secondary"
  [cdkMenuTriggerFor]="menu"
>
  @if (xpert()) {
    <div class="text-token-text-secondary">{{xpert()?.title || xpert()?.name}} <span class="text-token-text-secondary"></span></div>
  } @else {
    <div class="text-token-text-secondary">{{ 'PAC.Chat.Common' | translate: {Default: 'Common'} }}</div>
  }
  <i class="ri-arrow-down-s-line text-token-text-tertiary"></i>
</div>

<div class="flex-1"></div>

<ng-template #menu>
  <div class="ngm-cdk-menu p-2" cdkMenu displayDensity="cosy">
    <label class="px-2 pb-2">{{'PAC.KEY_WORDS.Knowledgebases' | translate: {Default: 'Knowledgebases'} }}</label>
    <div class="max-h-64 w-56 overflow-y-auto" (click)="$event.stopPropagation()">
      @if (knowledgebaseList()?.length) {
        <pac-knowledgebase-list class="w-full" [disabled]="disabled()" [knowledgebaseList]="knowledgebaseList()" [(knowledgebases)]="knowledgebases" />
      } @else {
        <div class="flex justify-center p-4 text-token-text-secondary">
          <i class="ri-battery-line mr-1"></i>
          {{ 'PAC.KEY_WORDS.Empty' | translate: {Default: 'Empty'} }}
        </div>
      }
    </div>

    <!-- <label class="p-2">{{'PAC.KEY_WORDS.Toolset' | translate: {Default: 'Toolset'} }}</label>
    <div class="max-h-64 w-56 mb-2" (click)="$event.stopPropagation()">
      @if (toolsetList()?.length) {
        <pac-toolset-list class="w-full" [disabled]="disabled()" [toolsetList]="toolsetList()" [(toolsets)]="toolsets" />
      } @else {
        <div class="flex justify-center p-4 text-token-text-secondary">
          <mat-icon fontSet="material-icons-outlined">battery_horiz_000</mat-icon> {{ 'PAC.KEY_WORDS.Empty' | translate: {Default: 'Empty'}  }}</div>
      }
    </div> -->

    <!-- <button class="ngm-cdk-menu-item" cdkMenuItem>
      <mat-icon class="text-token-text-secondary mr-2">visibility_off</mat-icon>
      <span>{{'PAC.KEY_WORDS.Hidden'  | translate: {Default: 'Hidden'} }}</span>
    </button> -->

    @if (xpert()?.id) {
      <button class="ngm-cdk-menu-item p-1" cdkMenuItem (click)="openAbout()">
        <i class="ri-information-2-line mr-2"></i>
        {{'PAC.KEY_WORDS.About'  | translate: {Default: 'About'} }}
      </button>
    }
  </div>
</ng-template>